
<template>
    <el-card class="box-card">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple" >
                            <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item :to="{ path: '/' }">疫情防控</el-breadcrumb-item>
                                <el-breadcrumb-item >员工管理</el-breadcrumb-item>
                                
                            </el-breadcrumb>
                        </div>
                    </el-col>
                    <el-col class="kuang-left" :span="12">
                        <div  class="input-kuang">
                            <div  style="margin-bottom: 15px; margin-left: 240px;">
                                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                                        <el-option label="货物联系人" value="1"></el-option>
                                        <el-option label="联系电话" value="2"></el-option>
                                        <el-option label="用户电话" value="3"></el-option>
                                    </el-select>
                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                </el-input>
                            </div>
                            <div class="anniu"  >
                                <el-button round  >添加</el-button>
                            </div>
                            
                            
                        </div>
                      
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <template>
                    
                    <el-table class="biaoge"
                    :data="tableData.light.slice((page-1)*item,item*page)" border style="width: 95%" >
                        <el-table-column fixed prop="hsy_id" label="职工编号" width="80">
                        </el-table-column>
                        <el-table-column prop="hsy_name" label="姓名" width="90">
                        </el-table-column>
                        <el-table-column prop="hsy_sex" label="性别" width="80">
                        </el-table-column>
                        <el-table-column prop="hsy_card" label="身份证号" width="150">
                        </el-table-column>
                        <el-table-column prop="hsy_number" label="联系电话" width="110">
                        </el-table-column>
                        <el-table-column prop="hsy_home" label="当前住址" width="230">
                        </el-table-column>
                        <el-table-column prop="hsy_time" label="检测时间" width="180">
                        </el-table-column>
                        <el-table-column prop="hsy_result" label="核酸检测结果" width="100">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-main>
    
    
    
            <el-footer class="footer" height="80px">
                <el-container>
                    <el-header class="fenye-ui">
                        <el-col class="col-left" :span="12">
                           <span>总计{{ tableData.light.length }}条员工核酸信息</span> 
                        </el-col>
                        <el-col class="col-right" :span="12">
                            <el-pagination 
                            :page-size="item"
                            :total="tableData.light.length" 
                            layout="total,prev, pager, next"
                            :current-page="page" 
                            @current-change="change">
                            </el-pagination>
                        </el-col>
                    </el-header>
                    
                    <el-main>
                        2022 &copy; HuiTong ParkingLot
                    </el-main>
                </el-container>
            </el-footer>
        </el-container>
    
    </el-card>
    </template>
        
        
    <script>
    
    import axios from 'axios'
    import { reactive, ref } from 'vue'
    export default {
        setup(){
            let tableData = reactive({light:[]});
            let page = ref(1);
            let item = ref(8);
        
            const change = (val)=>{
                page.value = val
            };
    
            axios({
                    method:'get',//请求类型
                    url:'http://localhost:8081/yghs/cha'
                }).then(response =>{
                    console.log(response);
                   tableData.light = response.data.data;
                })
    
    
                return{
                    tableData,
                    item,
                    page,
                    change
                }
        }
    
    }
    </script>
        
        
        
    <style scoped>
    /*子页面卡片* */
        .el-card{
            margin-top: 5px;
            height: 62   0px;
           margin-left: 0px;
         
        border-radius: 30px;
        
        }
        /**卡片中的整体布局 */
        .el-container{
            padding: 2;
            margin: 0;
          
           
         
        }
        
        /**布局中 容器头部--包含面包屑，输入框 */
        .el-header{
            max-height: 24px;
            
        }
        /**面包屑 */
        .el-icon-arrow-right{
         margin-left: 100px;
            text-align: center;
            align-items: center;
        }
        /**输入框的外部 */
        .kuang-left{
           
           text-align: center;
           align-items: center;
           right: 100px;
          
        
        }
        /**输入框 */
        .input-kuang{
            display: flex;
            /**水平对齐 -靠左*/
            justify-content:flex-start;
         
        }
        /**添加按钮 */
        .anniu{
            justify-content:flex-end;
            margin-left: 5px;
        
            font-size: 20px;
            letter-spacing:8px;
        }
        
        /**容器中间 表格 */
        .el-main{
            height: 520px;
           
        }
         /**表格样式  */
         .biaoge{
            margin: auto;
        }
        .el-footer{
            height: 250px;
           
        }
       
        /**容器 底部*/
        
        .col-right{
          
            margin-top: 8px;
            font-size: 20px;
            
    
           
        }
        .col-left {
         color: rgb(130, 152, 207);
         font-size: 18px;
         margin-top: 8px;
         letter-spacing:2px;
        }
    </style>